<template>
  <div style="overflow: hidden">
    <TheBannerOfBrand :product-name="brand.name" :title="title" :description="brand.brandStory" :background-image="brand.bigPic" :isProdcut="isProdcut"></TheBannerOfBrand>

  <div class="container">
      <div class="product-card" style="background-color: rgba(200,100,100,0); margin-top: -800px; margin-left: 20px ; text-align: center" >
        <figure class="card-banner" style="height: 200px;width: 200px">
          <img :src="brand.logo" style="height: 200px;width: 200px; border-radius: 100px">
          <span style="color: black">小米</span>
        </figure>
      </div>
    <el-card style="margin-top: -100px; border-radius: 50px">
      <h2 class="h2 section-title" style="text-align: center;margin-top:100px" >{{ brand.name }}专柜</h2>
      <h2 class="h2 section-title" style="text-align: center;margin-top:100px" v-if="brand.productList.length===0">该品牌暂无商品</h2>
      <ul class="product-list">
        <li v-for="product in brand.productList" :key="product.name" class="product-item">
          <div class="product-card">
            <figure class="card-banner">
              <img :src="product.image" loading="lazy"
                   class="image-contain" @click="handleProductClick(product.id)">
              <div class="card-badge">{{ product.tag || 'New' }}</div>
              <ul class="card-action-list">
                <li class="card-action-item">
                  <button class="card-action-btn el-icon-goods" aria-labelledby="card-label-1"  @click="handleAdd(product)">
                  </button>
                  <div class="card-action-tooltip" id="card-label-1">添加到购物车</div>
                </li>
                <li class="card-action-item">
                  <button class="card-action-btn el-icon-view" aria-labelledby="card-label-3" @click="handleProductClick(product.id)">
                  </button>
                  <div class="card-action-tooltip" id="card-label-3" >查看详情</div>
                </li>
<!--                <li class="card-action-item">-->
<!--                  <button class="card-action-btn el-icon-star-off" aria-labelledby="card-label-4">-->
<!--                  </button>-->
<!--                  <div class="card-action-tooltip" id="card-label-4">收藏</div>-->
<!--                </li>-->
<!--                <li class="card-action-item">-->
<!--                  <button class="card-action-btn el-icon-search" aria-labelledby="card-label-4">-->
<!--                  </button>-->
<!--                  <div class="card-action-tooltip" id="card-label-4">找相似</div>-->
<!--                </li>-->
              </ul>
            </figure>

            <div class="card-content"
                 style="height: 150px;display: flex;flex-direction: column;justify-content:space-between;">
              <h3 class="h3 card-title">{{ product.name }}</h3>
              <data class="card-price">¥ {{ product.price }}</data>
            </div>
          </div>
        </li>
      </ul>
    </el-card>
  </div>
    <TheFooter></TheFooter>
  </div>
</template>

<script>
import TheBannerOfBrand from "@/views/front/home/components/TheBannerOfBrand.vue";
import {getBrandDetail} from "@/api/brand";
import TheFooter from "@/views/front/home/components/TheFooter";

export default {
  name: "BrandDetail",
  components: {
    TheFooter,
    TheBannerOfBrand
  },
  data() {
    return {
      brand: {
        id: 0,
        name: "",
        logo: "",
        bigPic: "",
        brandStory: "",
        productList: [],
      },
      form:{},
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) :{},
      memberId:localStorage.getItem("id"),
      title: "",
      isProdcut: false,
    }
  },
  created() {
    this.load()
  },
  mounted() {
    window.scroll(0, 0)
  },
  methods: {
    load() {
      getBrandDetail(this.$route.query.id).then(response => {
        this.brand = response.data;
      });
    },
    handleProductClick(pid) {
      console.log(pid);
      this.$router.push({
        path: this.$router.push({path: '/front/detail', query: {id: pid}})
      })
    },
    handleAdd(product){
      if(!this.user.username){
        this.$message.warning("请登陆后操作")
        return
      }
      let spData ='[{"key":"颜色","value":"默认"},{"key":"尺寸","value":"默认"}]'
      this.form.spData = spData
      this.form.productId= product.id
      this.form.memberId = this.memberId
      this.form.quantity = 1
      this.form.productPic = product.image
      this.form.productName = product.name
      this.form.price = product.price
      this.form.deleteStatus = 1
      this.form.memberNickname = this.user.nickname
      this.request.post("/cart",this.form).then(res=>{
        if(res){
          this.$message.success("添加成功！")
        }else{
          this.$message.error("网络开小差啦！请稍后再试")
        }
      })
      this.$router.push('/front/shoppingCart')
      console.log(product)
    },
  },
}
</script>

<style>

</style>